import React from "react";
// import './index.css';
import ProductCard from "../../../../Component/ProductCard";
import {Button,Input, Radio} from "antd";
import PriceTag from "../../../../Component/PriceTag";
import BGUtil from "../../../../utils/BGUtil"
// import IFrameUtil from "../../../../../utils/IFrameUtil";
import MessageUtil from "../../../../utils/MessageUtil";
import RedStar from "../../../../Component/RedStar"
import Protrait from "../../../../Component/Protrait";
import ColorBox from "../../../../Component/ColorBox";
import TransactionServer from "../../../../Server/Trade/TransactionServer";
import URL from "../../../../Server/URL";
import Blank from "../../../../Component/Blank";
import ShopServer from "../../../../Server/Trade/ShopServer";
import UserCheck from "../../../../utils/UserCheck";
import { Switch } from 'antd';
import TransactionFinish from "../../../../Common/svg/Transaction/Finish"
import TransactionWaitDelivery from "../../../../Common/svg/Transaction/WaitDelivery"
import TransactionWaitReceive from "../../../../Common/svg/Transaction/WaitReceive"
import Bar from "../../../../Component/Bar";

export default class extends React.Component{
    testLogo="http://39.100.3.34:8888/fly/2de6a15c0dc34c398272e2d6eecf266d.jpg";
    constructor(props){
        super();
        let id=props.match.params.id;
        let shopType=props.match.params.shopType;


        this.state={
            hired:props.hired,
            sellerName:"",
            seled:false,
            id,
            shopType:shopType,//商品类型 0二手飞行器 1二手配件 2租赁飞行器 3租赁配件
            droneImg:"",
            price:"",
            brand:"",
            droneType:"",
            model:"",
            sn:"",
            title:"",
            cashDeposit:false,
            isInsurance:false,
            selectInsurance:false,

            orderRemark:"",
            flyTestAircraft:1,
            testAircraftPrice:"600",
            mailName:"",
            mailPhone:"",
            mailAddress:"",

            errMsg:""
        }
        this.Gen();

        BGUtil.InitBG();
        // IFrameUtil.UpdateIframeHeight();
    }
    Gen(){
        TransactionServer.TransactionSelectShopDetails(this.state.shopType,
            this.state.id)
            .then(res=>{
                let data=res.data;
                console.log(res)
                this.setState({
                    // sellerName:"",
                    droneImg:URL.GetURL(data.aerocraftImgUrl),
                    price:data.price,
                    brand:data.aerocraftBrand,
                    droneType:data.aerocraftType,
                    model:data.aerocraftModel,
                    sn:data.aerocraftSn,
                    title:data.title,
                    cashDeposit:data.cashDeposit>0,
                    isInsurance:data.insuranceStatus==="0",

                    sellerUserId:data.userId,
                    shopId:data.id,

                    cashDepositPrice:data.cashDeposit

                })
            });
    }
    componentDidMount(){
        MessageUtil.ChangeHeight();
    }
    Commit(){
        ShopServer.ShopSecondHandOrder(
            UserCheck.GetUserID(),
            this.state.sellerUserId,
            this.state.shopId,
            this.state.shopType,
            this.state.orderRemark,
            this.state.mailName,
            this.state.mailPhone,
            this.state.mailAddress,
            this.state.flyTestAircraft,
            this.state.testAircraftPrice,
            this.state.cashDepositPrice,
            this.state.price,
            // coupon
        )
        .then(res=>{
            console.log(res)
        })
    }
    render(){
        let status=this.state.seled?
        <ColorBox color="#CCC" text="已租出"/>
        :<ColorBox color="#49A1F1" text="未出租"/>;

        let time="租用时间：201909/23-2019/10-03";

        let badge=[];
        if(this.state.isInsurance){
            badge.push(
                <img alt="Insurance" src="/assets/Good/Insurance.png"/>,
            )
        }
        if(this.state.isMoney){
            badge.push(
                <img alt="GuaranteeMoney" src="/assets/Good/GuaranteeMoney.png"/>
            )
        }
        
        return(
            <div className="HireServiceOrderDetail_Container Courseware_Body">
                <div className="HireServiceOrderDetail">
                <ProductCard
                    title={this.state.title}
                    subtitle={["品牌："+this.state.brand, "类型："+this.state.droneType,
                        "型号："+this.state.model,"sn号："+this.state.sn]}
                    badge={badge}
                    priceText={<PriceTag  price={this.state.price} unit={"天"}/>}
                />
                </div>
                <div className="Courseware_Body HireServiceOrderDetail">
                    <div style={{marginBottom:"0.5rem"}}>
                        <Protrait src={this.testLogo}/>
                        <span className="HireServiceDetail_User_Name">{this.state.sellerName}</span>
                    </div>

                    <div className="UserInfo_Down_Input">
                        <span className="Down_Input_Title">产品服务</span>
                        <div className="Down_Input_Body">
                            <Input prefix="" suffix="派验机/无附属服务（卖家选择）" value={this.state.userName} 
                            onChange={e=>this.ChangeName(e)}/>
                        </div>
                    </div>
                    <div className="UserInfo_Down_Input">
                        <span className="Down_Input_Title">配送服务</span>
                        <div className="Down_Input_Body">
                            <Input prefix="" suffix="包邮" value={this.state.userName} 
                            onChange={e=>this.ChangeName(e)}/>
                        </div>
                    </div>
                    <div className="UserInfo_Down_Input">
                        <span className="Down_Input_Title">运费险</span>
                        <div className="Down_Input_Body ">
                            <Input style={{width:"85%"}} prefix="确认收货前退货可赔"disabled={true}/>
                            <span>
                            ￥1.2 <Radio disabled={true} onClick={e=>this.setState({selectInsurance:!this.state.selectInsurance})} 
                             checked={this.state.selectInsurance} style={{display:"inline-block"}}></Radio>
                            </span>
                        </div>
                    </div>
                    <div className="UserInfo_Down_Input">
                        <span className="Down_Input_Title">姓名</span>
                        <div className="Down_Input_Body">
                            <Input  placeholder="" onChange={e=>this.setState({mailName:e.target.value})}/>
                        </div>
                    </div>
                    <div className="UserInfo_Down_Input">
                        <span className="Down_Input_Title">手机号</span>
                        <div className="Down_Input_Body">
                            <Input  placeholder="" onChange={e=>this.setState({mailPhone:e.target.value})}/>
                        </div>
                    </div>
                    <div className="UserInfo_Down_Input">
                        <span className="Down_Input_Title">地址</span>
                        <div className="Down_Input_Body">
                            <Input  placeholder="" onChange={e=>this.setState({mailAddress:e.target.value})}/>
                        </div>
                    </div>
                    <div className="UserInfo_Down_Input">
                        <span className="Down_Input_Title">订单备注</span>
                        <div className="Down_Input_Body">
                            <Input  placeholder="选填，请先和卖家协商一致" onChange={e=>this.setState({orderRemark:e.target.value})}/>
                        </div>
                    </div>
                    
                </div>
                <div className="Courseware_Body HireServiceOrderDetail">
                <div className=" UserInfo_Down_Input">
                        <span className="Down_Input_Title">交易保证金</span>
                        <div className="Down_Input_Body">
                            <Input  disabled={true} value={"￥"+this.state.cashDepositPrice} />
                        </div>
                    </div>
                    <div className=" UserInfo_Down_Input">
                        <span className="Down_Input_Title">派验机</span>
                        <div className="Down_Input_Body ">
                            <div className="flexContainer">
                                <Blank/>
                                <span style={{lineHeight:"22px"}}>￥{this.state.testAircraftPrice} </span>
                                &nbsp;<Switch  onChange={
                                    checked=>this.setState({
                                        flyTestAircraft:checked?0:1
                                    })} />
                            </div>
                            
                        </div>
                    </div>
                    <div className="UserInfo_Down_Margin middle">
                        <div style={{verticalAlign:"middle",marginTop:"1rem"}}>
                            <span className="">
                                <TransactionWaitDelivery active={true}/>
                                <div style={{display:"inline-block", height:"53px", verticalAlign:"middle" }}><Bar width="20rem" color="#5393eb"/></div>
                            </span>
                            <span className="">
                                <TransactionWaitReceive  active={true}/>
                                <div style={{display:"inline-block", height:"53px", verticalAlign:"middle" }}><Bar width="20rem"  color="#5393eb"/></div>

                            </span>
                            <span className="">
                                <TransactionWaitDelivery  active={true}/>
                            </span>
                        </div>
                    </div>
                    <div className="UserInfo_Down_Margin">
                        <RedStar/>
                        <span>为保证交易双方的权益，卖家已申请交易保证金，卖家提交订单后若取消订单或者不能按时支付订单，卖家将承担此次交易的赔偿金600元。 提交订单后，交易保证金将从余额账户冻结，交易结束后1-3个工作日解冻。</span>
                    </div>
                    <div className=" UserInfo_Down_Input">
                        <span className="Down_Input_Title">代金券</span>
                        <div className="Down_Input_Body">
                            <Input prefix="" suffix="（只能设置一次）" value={this.state.userName} 
                            onChange={e=>this.ChangeName(e)}/>
                        </div>
                    </div>

                    <div className="UserInfo_Down_Margin">
                        ￥{this.state.price}
                    </div>
                </div>
                <div className="errMsg">
                            {this.state.errMsg}
                </div>
                <div className="HireServiceDetail_Bottom">
                        <a href={"/trade/secondHandPay/"+this.state.id} alt="pay">
                            <Button style={{width:"12rem"}} type="primary" 
                            shape="round" size="large" onClick={e=>this.Commit(e)}>
                                提交订单
                            </Button>
                        </a>
                    </div>
            </div>
        )
    }
}